@extends("admin.layout.main")

@section("css")
	<style>
		.uploadbtn {
			border:1px solid #efefef;
			height:145px;
			width:145px;
			margin:10px;
			background:url(/images/image.png) no-repeat center;
			position: relative;
		}
		.picinput {
			width: 100%;
			height: 100%;
			cursor: pointer;
			opacity: 0;
		}
		.delpic {
			position: absolute;
			top: 0;
			right: 0;
			color: rgba(255, 0, 0, 0.5);
			background: rgba(0, 0, 0, 0.1);
			font-size: 70px;
			display: none;
		}
	</style>
@endsection

@section("content")
	<form class="layui-form layui-form-pane" style="width:60%;">
		<div class="layui-form-item">
			<label class="layui-form-label">商品名</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" name="goods_name" lay-verify="required" placeholder="请输入商品名">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">所需积分</label>
			<div class="layui-input-block">
				<input type="number" class="layui-input" name="scores" lay-verify="required" placeholder="请输入所需积分">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">市场价格</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" name="market_price" lay-verify="required" placeholder="请输入市场价格">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">运费</label>
			<div class="layui-input-block">
				<input type="text" value="0" class="layui-input" name="freight" lay-verify="required" placeholder="请输入运费">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">库存</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" name="rest" lay-verify="required" placeholder="请输入库存">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">上下架</label>
			<div class="layui-input-block">
				<input type="radio" name="status" value="0" title="未上架">
				<input type="radio" name="status" value="1" title="上架" checked>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">奖品首页图片</label>
			<div class="layui-input-block">
				<div class="layui-btn uploadbtn">
					<input title="选择图片上传" data-name="cover" class="picinput" type="file" accept="image/*">
					<i class="layui-icon delpic" style="font-size: 30px;">&#xe640;</i>上传图片
					<div class="picsub"></div>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">奖品banner图片</label>
			<div class="layui-input-block banner-zone">
				<div class="layui-btn uploadbtn">
					<input title="选择图片上传" data-name="banner" class="picinput" type="file" accept="image/*">
					<i class="layui-icon delpic" style="font-size: 30px;">&#xe640;</i>上传图片
					<div class="picsub"></div>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品详情</label>
			<div class="layui-input-block">
				<textarea id="info-editor" name="goods_info" placeholder="请输入内容" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品说明</label>
			<div class="layui-input-block">
				<textarea id="intro-editor" name="instructions" placeholder="请输入内容" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" type="button" lay-submit lay-filter="addGoods">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
@endsection

@section("js")
	<script type="text/javascript" src="/js/lrz.bundle.js"></script>
	<script type="text/javascript" src="/js/jquery.min.js"></script>
	<script type="text/javascript" src="/adstatic/neditor/neditor.config.js"></script>
	<script type="text/javascript" src="/adstatic/neditor/neditor.all.min.js"></script>
	<script>
        layui.use(['form','layer'],function() {
            var form = layui.form(),
                layer = layui.layer;


            $('body').on('click', '.delpic', function () {
                if($(this).siblings('.picinput').attr('data-name') == 'banner' && $('[data-name="banner"]').length > 1) {
                    $(this).closest('.uploadbtn').remove();
                    return;
				}
                $(this).hide();
                $(this).closest('.uploadbtn').css({'background': 'url(/images/image.png) no-repeat center'});
                $(this).siblings('.picsub').html('');
            });

            $('body').on('change', '.picinput', function () {
                var currentDom = this;
                var that = currentDom.files[0];
                var loadindex;
                lrz(that, {quality: 0.6}).then(function (results) {
                    loadindex = layer.msg('图片上传中',{icon: 16,time:false,shade:0.8});
                    $.ajax({
                        url: '/goods/qiniu_token'
                        ,type: 'post'
						,dataType: 'json'
                        ,data: {picType: that.type}
                        ,error: function () {
                            layer.alert('参数错误', {icon: 2}, function(index){
                                layer.close(index);
                            });
                        }
                        ,success: function (res) {
                            if (res.status == 0) {
                                var picurl = res.data.pic;
                                var formObj = new FormData();
                                formObj.append('token', res.data.token);
                                formObj.append('file', results.file);

                                var xhl = new XMLHttpRequest();
                                xhl.open("POST", "http://up-z2.qiniu.com/");
                                xhl.setRequestHeader('Access-Control-Allow-Origin', '*');

                                xhl.onload = function (event) {
                                    layer.close(loadindex);
                                    if (xhl.status == 200) {
                                        var msg = xhl.response || xhl.responseText;
                                        msg = JSON.parse(msg);
                                        if (msg.hash) {
                                            if ($(currentDom).attr('data-name') == 'cover') {  // 上传首页图片
                                                var subHtml = '<input type="hidden" name="cover" value="' + picurl + '">';
                                            } else if ($(currentDom).attr('data-name') == 'banner') { // 上传banner图
                                                var subHtml = '<input type="hidden" name="banner[]" value="' + picurl + '">';
                                                $(currentDom).closest('.uploadbtn').clone().appendTo('.banner-zone');
                                            }
                                            $(currentDom).siblings('.picsub').html(subHtml);
                                            $(currentDom).siblings('.delpic').show();
                                            $(currentDom).closest('.uploadbtn').css({
                                                'background': 'url("' + picurl + '")',
                                                'backgroundSize': '100% 100%'
											});
                                        }
                                    } else {
                                        layer.alert('上传失败', {icon: 2}, function(index){
                                            layer.close(index);
                                        });
                                    }
                                    results = null;
                                    xhl = null;
                                }
                                xhl.onerror = function () {
                                    layer.close(loadindex);
                                    layer.alert('上传失败', {icon: 2}, function(index){
                                        layer.close(index);
                                    });
                                }
                                xhl.send(formObj);
							} else {
                                layer.msg(res.msg);
							}
                        }
                    });
                });
            });

            UE.getEditor('info-editor');
            UE.getEditor('intro-editor');

            form.on("submit(addGoods)", function (data) {
                var loadindex = layer.msg('数据提交中',{icon: 16,time:false,shade:0.8});
                $.ajax({
                    url: '/goods/store'
                    ,type: 'post'
                    ,dataType: 'json'
                    ,data: data.field
                    ,complete: function () {
                        layer.close(loadindex);
                    }
                    ,error: function (msg) {
                        layer.alert('添加失败', {icon: 2}, function(index){
                            layer.close(index);
                        });
                    }
                    ,success: function (res) {
                        if (res.status == 0) {
                            layer.alert('添加成功', {icon: 1}, function(index){
                                layer.close(index);
                            });
                            layer.closeAll('iframe');
                            parent.location.reload();
						} else {
                            layer.alert(res.msg, {icon: 2}, function(index){
                                layer.close(index);
                            });
						}

                    }
                });
            });


        });
	</script>
@endsection
